<!-- 
这是一个示例文件，展示如何在登录页面中使用国际化
实际使用时，请参考此示例修改 pages/login/login.vue
-->

<template>
	<view class="page_content">
		<view class="head_content">
			<!-- 使用 $t() 函数获取翻译 -->
			<CustomNavbar :title="$t('login.title')"></CustomNavbar>
		</view>
		<view class="main_content">
			<view class="input_box" v-if="login.type == 2 || login.bind">
				<u-form ref="uForm" :model="form" :rules="rules">
					<u-form-item prop="mobile">
						<view class="input">
							<!-- placeholder 使用翻译 -->
							<u-input v-model="form.username" type="text" clearable :placeholder="$t('login.enterUsername')"></u-input>
						</view>
					</u-form-item>
					<u-form-item prop="password" v-if="login.type2 == 1">
						<view class="input">
							<u-input v-model="form.password" type="password" clearable :placeholder="$t('login.enterPassword')"></u-input>
						</view>
					</u-form-item>
					<u-form-item prop="code" v-else>
						<view class="input">
							<u-input v-model="form.code" type="number" clearable :placeholder="$t('login.enterCode')">
								<template #suffix>
									<u-code ref="uCode" uniqueKey="login-code" :keepRunning="true" @change="codeChange" seconds="60" :changeText="$t('login.resendCode')"></u-code>
									<view class="codebtn" @click="getCode">{{ login.codeTips }}</view>
								</template>
							</u-input>
						</view>
					</u-form-item>
				</u-form>			
			</view>
			<view class="button_box">
				<!-- 按钮文本使用翻译 -->
				<u-button v-if="login.type == 1 && !login.bind" :text="$t('login.submit')" :loading="buttonLoading" :customStyle="buttonStyle" @click="loginSubmit" />
				<u-button v-if="login.type == 1 && login.bind" :text="$t('login.bindMobile')" :loading="buttonLoading" :customStyle="buttonStyle" @click="loginSubmit" />
				<u-button v-if="login.type == 2" :text="login.type2 == 3 ? $t('login.changePassword') : $t('login.submit')" :loading="buttonLoading" :customStyle="buttonStyle" @click="loginSubmit" />
			</view>
			<view class="check_box">
				<u-checkbox-group v-model="agreementValue" @change="labelChange">
					<u-checkbox :name="true" :label="$t('login.readAndAgree')" labelSize="28rpx" labelColor="#333"></u-checkbox>
				</u-checkbox-group>
				<!-- 链接文本使用翻译 -->
				<text class="text" @click="agreementClick(1, $t('login.userAgreement'))">{{ $t('login.userAgreement') }}</text>
				<text>{{ $t('login.and') }}</text>
				<text class="text" @click="agreementClick(2, $t('login.privacyAgreement'))">{{ $t('login.privacyAgreement') }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				login: {
					type: 2,
					type2: 1,
					codeTips: '',
				},
				form: {
					username: '',
					password: '',
					code: '',
				},
				rules: {
					username: [
						{ required: true, message: this.$t('login.enterUsername'), trigger: ['blur', 'change'] },
					],
					password: [
						{ required: true, message: this.$t('login.enterPassword'), trigger: ['blur', 'change'] },
					],
					code: [
						{ required: true, message: this.$t('login.enterCode'), trigger: ['blur', 'change'] },
					],
				},
			}
		},
		computed: {
			// 使用计算属性获取翻译
			navTitle() {
				if(this.login.bind) {
					return this.$t('login.bindMobile')
				} else if(this.login.type == 2) {
					if(this.login.type2 == 1) {
						return this.$t('login.passwordLogin')
					} else if(this.login.type2 == 2) {
						return this.$t('login.codeLogin')
					} else if(this.login.type2 == 3) {
						return this.$t('login.forgotPassword')
					}
				}
				return this.$t('login.title')
			}
		},
		methods: {
			// 在方法中使用翻译
			loginSubmit() {
				if(!this.login.checked) {
					// 提示信息使用翻译
					this.$u.toast(this.$t('login.pleaseAgree'))
					return
				}
				// ... 登录逻辑
			},
			accountLogin(obj) {
				this.$request('login.accountLogin', obj).then(res => {
					if(res.code === 1) {
						// 成功提示使用翻译
						this.$u.toast(this.$t('login.loginSuccess'))
						// ... 其他逻辑
					}
				})
			},
			getCode() {
				if(!this.form.mobile) {
					this.$u.toast(this.$t('login.enterMobile'))
					return
				}
				// ... 获取验证码逻辑
				uni.showLoading({
					title: this.$t('login.gettingCode')
				})
				// ... 请求逻辑
			}
		}
	}
</script>

